<template>
  <el-dialog
    v-model="visible"
    :title="`${paramsProps.title}`"
    :destroy-on-close="true"
    width="580px"
    draggable
  >
    <el-form
      ref="ruleFormRef"
      label-width="140px"
      label-suffix=" :"
      :rules="rules"
      :model="paramsProps.row"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="颜色" prop="colorName">
        <OnSelectColor
          :id="selectProps.id"
          :modelValue ="paramsProps.row.colorName"
          :test ="paramsProps.row"
          @update:sonTest="setNewValue"
        />
      </el-form-item>

<!--      <el-form-item label="颜色网页码" prop="colorCode" >-->
<!--        <el-input-->
<!--          v-model="paramsProps.row.color"-->
<!--          placeholder="请填写颜色网页码"-->
<!--          clearable-->
<!--        ></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="标签文本" prop="describe">
        <inputSelf
          :text ="paramsProps.row.describe"
          :initValue="paramsProps.row.color"
          :totalColor ="currentColor"
          ref="inputSonRef"
          @update:inputValue="setNewInput"
        ></inputSelf>
<!--        <el-input-->
<!--          v-model="paramsProps.row.describe"-->
<!--          placeholder="请填写标签文本"-->
<!--          @click="showIsReslut(paramsProps.row,paramsProps.row.describe,paramsProps)"-->
<!--          clearable-->
<!--        ></el-input>-->
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="paramsProps.row.remark"
          placeholder="请填写备注"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="标签类型" prop="tagType">
        <el-select v-model="paramsProps.row.tagType" clearable placeholder="请选择标签类型">
          <el-option
            v-for="item in optionsStore.getDictOptions('tagType')"
            :key="item.id"
            :label="item.codeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx">
import {ref, reactive, watch} from 'vue'
import { type ElForm, ElMessage } from 'element-plus'
import { useOptionsStore } from '@/stores/modules/options'
import OnSelectColor from "@/views/novel/tag/components/Children/onSelectColor.vue";
import inputSelf from "@/views/novel/tag/components/Children/inputSelf.vue";
import {useDictOptions} from "@/hooks/useDictOptions";

defineOptions({
    name: 'ChararterTagForm'
})

const optionsStore = useOptionsStore()
const rules = reactive({
})

const visible = ref(false)
const paramsProps = ref<View.DefaultParams>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined,
})

const inputSonRef = ref()
const currentColor = ref('')

const selectProps = reactive({
  id: 'power',
  test: paramsProps
})

// 接收父组件传过来的参数
const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params
  visible.value = true
}

const colorArr = useDictOptions('tagColor');
// 等待子组件调用的方法  妈的居然会有无法双向绑定的情况！！！
const setNewValue = (test: any) => {
  console.log('儿子啊儿子，我是你爸爸',test)
  let target = colorArr.value.find((s: any) => test === s.codeName );
  paramsProps.value.row.colorName = target?.codeName
  paramsProps.value.row.color = target?.detailValue
  //让另一组件感知
  currentColor.value = target?.detailValue || '';
}

// 等待子组件调用的方法 设计的好像就是只能拿父数据但不能改父数据，改只能通过事件调用
const setNewInput = (test: any) => {
  console.log('儿子啊儿子，我是你爸爸',test)
  paramsProps.value.row.describe = test
  console.log('这个百分之一百是响应式',paramsProps.value.row.describe)
}

// 等待子组件调用的方法  妈的居然会有无法双向绑定的情况！！！
// const setInput = (test: any) => {
//   console.log('儿子啊儿子，我是你爸爸',test)
//   // let target = colorArr.value.find((s: any) => test === s.codeName );
//   // paramsProps.value.row.colorName = target?.codeName
//   // paramsProps.value.row.color = target?.detailValue
// }
//
// // 判断当前传入类型是否为响应式  加载完也是空的情况
// const showIsReslut = (testq: any,testw: any,teste: any) => {
//   console.log('儿子啊儿子，我是你爸爸',testq)
//   console.log('儿子啊儿子，我是你爸爸',testw)
//   console.log('儿子啊儿子，我是你爸爸',teste)
// }

// let test = ref({
//   backgroundColor: '',
//   opacity: 1,
//   borderRadius: '4px',
//   fontSize: '16px',
//   borderColor: '',
//   fontWeight: 'no',
//   color: '',
//   totalColor: ''
// })

// 判断当前传入类型是否为响应式  加载完也是空的情况
// const setNewStyle = (color: any) => {
//   if (color){
//     let totalColor = test.value.totalColor;
//     //去除边框颜色和字体颜色的透明度设置
//     test.value['color'] = updateColor(totalColor) ||'';
//     test.value['borderColor'] = updateColor(totalColor) ||'';
//     test.value['backgroundColor'] = totalColor;
//   }
//   return test.value
// }

// 去除透明度
// const updateColor = (colorValue: string | undefined) => {
//   if (colorValue) {
//     let parts = colorValue.toString().split(',');
//     if (parts.length > 3) {
//       return `rgb(${parts[0].slice(5)}, ${parts[1]}, ${parts[2]})`;
//     }
//   }
//   return colorValue;
// };


// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await paramsProps.value.api!(paramsProps.value.row)
      ElMessage.success({ message: `${paramsProps.value.title}成功！` })
      paramsProps.value.getTableList!()
      visible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

//watch属于挂载阶段
//挂载时期传参数给儿子只能用ref了
watch(() => currentColor.value, (newVal) => {
  console.log('去告诉儿子，爸爸要变身了',newVal)
  inputSonRef?.value?.getFather(newVal)
});

// //清空儿子们的参数,element在父组件destory的时候，子组件不会
watch(() => visible.value, (newVal) => {
  console.log('重置父级和所有儿子们的参数',newVal)
  if (newVal === false){
    currentColor.value = ''
    inputSonRef?.value?.clearValue()
  }
});


// 创建一个计算属性，支持双向绑定
// const colorValue = computed({
//   get: () => paramsProps.value.row.color || '',  // 获取 row.color 或默认值
//   set: (newColor: string) => {
//     paramsProps.value.row.color = newColor;  // 设置 row.color
//   }
// });
// 接收父组件传过来的参数
// const showValue = () => {
//   console.log(colorValue.value)
// }


// watch(() => selectedColor.value, (newVal) => {
//   debugger
//   console.log('变变变变变变变变变变变变变变变变变变变变变变变2',newVal)
//   newVal = newVal.value.replace(')','').replace('rgb','')
//   let target = colorOption.value.find((s: any) => s.detailValue.includes(newVal) );
//   //selectedColor.value = target?.codeName || ''; // 监听父组件的值变化
// });

// const colorValue = ref<String>('')
// // 监听 row.color 的变化
// watch(() => paramsProps.value.row.color, (newColor) => {
//   console.log('wwwwwww',newColor)
//   if (newColor) {
//     colorValue.value = newColor;
//   }
// });

// 深度检测样例
// watch(() =>{return paramsProps}, (oldVal,newVal) => {
//   console.log('变变变变变变变变变变变变变变变变变变变变变变变',oldVal)
//   console.log('变变变变变变变变变变变变变变变变变变变变变变变2',newVal)
// },{ deep: true });

// onBeforeMount(() => {
//   console.log('wryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyx')
//   console.log(props.initValue)
// });

defineExpose({
  acceptParams
})
</script>

<style scoped lang="scss"></style>